<template>
  <div>
    <el-table
      :data="materiaData"
      style="width: 100%"
      max-height="650">
      <el-table-column
        prop="materialName"
        label="素材名称"
        width="140">
      </el-table-column>
      <el-table-column prop="materialImg" label="商品图" width="80">
      <template>
        <el-image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=225088321,3121593736&fm=26&gp=0.jpg"></el-image>
      </template>
      </el-table-column>
      <el-table-column
        prop="materialCategory"
        label="素材类别"
        width="140">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="140">
      </el-table-column>
      <el-table-column
        prop="uploadingID"
        label="上传者ID"
        width="140">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        width="140">
      </el-table-column>
      <el-table-column
        prop="uploadingDate"
        label="提交违规审核日期"
        width="193">
      </el-table-column>
      <el-table-column
        prop="auditState"
        label="审核状态"
        width="140">
      </el-table-column>
      <el-table-column
        prop="auditDate"
        label="审核日期"
        width="140">
      </el-table-column>
      <el-table-column
        prop="auditRemark"
        label="违规备注"
        width="140">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="270">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">违规下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="600px" title="是否确定用户素材违规/未违规" :visible="showDialog" @close="cancel">
      <el-input
        ref="auditMaterial"
        type="textarea"
        :rows="10"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="30">
          <el-button type="success" size="medium" style="width: 200px" @click="submitTrade(textarea)">确认违规下架</el-button>
          <el-button size="medium" @click="cancel" style="width: 200px">未违规不下架</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showDialog: false,
      textarea: '',
      materiaData: [{
        materialName: '烤鸭子',
        materialImg: 'xxxx.jpj',
        materialCategory: '乐事薯片',
        price: 5000,
        uploadingID: 123,
        phone: 19898989898,
        uploadingDate: '2021-10-01',
        auditState: '待审核',
        auditDate: '2021-11-01',
        auditRemark: ''
      },
      {
        materialName: '烤鸭子',
        materialImg: 'xxxx.jpj',
        materialCategory: '餐饮业-烧腊',
        price: 5000,
        uploadingID: 123,
        phone: 19898989898,
        uploadingDate: '2021-10-01',
        auditState: '待审核',
        auditDate: '2021-11-01',
        auditRemark: ''
      },
      {
        materialName: '烤鸭子',
        materialImg: 'xxxx.jpj',
        materialCategory: '餐饮业-烧腊',
        price: 5000,
        uploadingID: 123,
        phone: 19898989898,
        uploadingDate: '2021-10-01',
        auditState: '待审核',
        auditDate: '2021-11-01',
        auditRemark: '审核失败'
      }]
    }
  },
  methods: {
    handleClick (id) {
      this.showDialog = true
    },
    cancel () {
      this.showDialog = false
    },
    async submitTrade (textarea) {
      try {
        this.textarea = textarea
        this.showDialog = false
      } catch (err) {
        console.log(err)
        this.$message('先按提示填好信息')
      }
    }
  }
}
</script>

<style>

</style>
